<template>
  <div
    class="_load-more"
    :class="{
      _disabled: props.status === LoadMore.NoMore,
      _mobile: isMobile,
      [props.loadMoreClass]: true,
    }"
  >
    <span v-if="props.status === LoadMore.LoadMore">Load More</span>
    <span v-if="props.status === LoadMore.Loading">
      <loading
        :class="{ '!w-2rem': !isMobile, '!w-1.2rem': isMobile }"
        :track-width="3"
      />
    </span>
    <span v-if="props.status === LoadMore.NoMore">No More</span>
  </div>
</template>

<script lang="tsx" setup>
import Loading from "@/components/Loading/loading.vue";
import { useMedia } from "@/hooks/useMedia";

import { LoadMore, loadMoreProps } from "./loadMore";

const props = defineProps(loadMoreProps);

const isMobile = useMedia();
</script>

<style lang="less" scoped>
._load-more {
  @apply flex items-center justify-center h-5rem cursor-pointer;
  @apply !text-1.31rem !leading-1.5rem rounded-0.5rem;
  &:active {
    opacity: 0.6;
  }

  &._disabled {
    opacity: 0.8;
    cursor: not-allowed;
    user-select: none;
  }

  &._mobile {
    font-size: 1rem !important;
    line-height: 1.13rem !important;
    height: 2.5rem;
    cursor: unset;
  }
}
</style>
